<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>区块信息</span>
      </div>
      <el-row class="box">
        <el-row type="flex" justify="space-between">
          <el-row
            class="cardCon"
            type="flex"
            justify="space-between"
            align="middle"
            v-for="(item, idx) of list"
            :key="idx"
          >
            <el-row>
              <el-row type="flex" justify="center" class="fontStyle">
                {{
                item.name
                }}
              </el-row>
              <el-row type="flex" justify="center">{{ item.con }}</el-row>
            </el-row>
          </el-row>
          <!-- <el-divider direction="vertical" style="height: 10vh"></el-divider> -->
        </el-row>
      </el-row>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected data: any = {
    height: 0,
    hash: "",
    txn_qty: 0,
    timestamp: null
  };

  protected list: any = [
    { name: "区块高度", con: "", id: 0 },
    { name: "区块生成时间", con: "", id: 1 },
    { name: "区块交易数量", con: "", id: 2 },
    { name: "区块哈希", con: "", id: 3 }
  ];
  @Watch("data", { deep: true })
  protected init() {
    const { height, hash, txn_qty, timestamp } = this.data;
    for (const key in this.data) {
      if (this.data.hasOwnProperty(key)) {
        switch (key) {
          case "height":
            this.list[0].con = height;
            break;
          case "hash":
            this.list[3].con = hash;
            break;
          case "txn_qty":
            this.list[2].con = txn_qty;
            break;
          case "timestamp":
            this.list[1].con = Vue.prototype.$fmtDate(timestamp);
            break;
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.fontStyle {
  color: #077be8;
  line-height: 36px;
}
</style>


